<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>element-ui 模板</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js" type="text/javascript"></script>
    <!-- vue发请求 -->
    <script src="js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>
</head>

<body>
	<div id="app">
		<center>
			<template>
			  <el-table
			    :data="stuList"
			    border
			    style="width: 50%">
			    <el-table-column
			      prop="id"
			      label="用户id"
			      width="280">
			    </el-table-column>
			    <el-table-column
			      prop="username"
			      label="用户名"
			      width="280">
			    </el-table-column>
			    <el-table-column
			      prop="password"
			      label="密码">
			    </el-table-column>
			  </el-table>
			</template>	
		</center>
	</div>
	<script type="text/javascript">
		/*
		* 数据来源于后台,我们需要去后台获取数据,ajax
		* 什么时候发请求?
		* 	页面打开的时候发送请求
		*
		*/

		new Vue({
			el:"#app",
			data:{
				/*数据来源于后台*/
				stuList:[]
			},
			created(){
				//创建后执行逻辑
				//发送ajax请求
				axios.get("user/findAll.do")
					.then(resp => {
						//vue中获取后台返回的数据
						if(resp.data.flag){
							this.stuList = resp.data.data;
						}else{
							alert('失败')
						}
					})
			}
		})
	</script>
</body>
</html>